<template>
  <div class="sfs_menus" :class="{ active: isApp }">
    <h3 class="title">目录树</h3>
    <div class="tree">
      <a-directory-tree
        multiple
        :defaultExpandedKeys="expandedKeys"
        :defaultSelectedKeys="selectedKeys"
        @select="onSelect"
        @expand="onExpand"
      >
        <a-tree-node
          :key="item.key"
          :title="item.title"
          v-for="item in treeData"
        >
          <a-tree-node
            :key="child.key"
            :title="child.title"
            is-leaf
            v-for="child in item.children"
          />
        </a-tree-node>
      </a-directory-tree>
    </div>
  </div>
</template>

<script>
import { treeData } from '@/utils/menuList.js'
export default {
  name: 'HelloWorld',
  data() {
    return {
      treeData,
    }
  },
  props: {
    isApp: {
      type: Boolean,
      default: false,
    },
    selectedKeys: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    expandedKeys() {
      let expandedKey = []
      if (this.selectedKeys?.length) {
        expandedKey[0] = this.selectedKeys[0].substring(0, 3)
        return expandedKey
      } else {
        return []
      }
    },
  },
  methods: {
    // 节点选中
    onSelect(keys, event) {
      if (event.node.eventKey.length > 3) {
        let title = event.node.title
        localStorage.setItem('selectedKey', keys)
        localStorage.setItem('selectedTitle', title)
        this.$store.dispatch('ON_SELECTEDTITLE', title)
        console.log(title.split(' / ')[1])
        this.$router.push(title.split(' / ')[1])
      }
    },
    // 展开/收起节点--手风琴模式
    onExpand(keys, event) {
      if (event.expanded) {
        if (keys.length > 0) {
          keys.splice(0, keys.length - 1)
        }
      }
    },
  },
}
</script>

<style scoped lang="less">
.sfs_menus {
  width: 300px;
  height: 100%;
  background: linear-gradient(to bottom, #e6cecf 0%, #d2cfe1 100%);
  padding: 0 10px;
  box-sizing: border-box;
  & .title {
    height: 52px;
    line-height: 52px;
    margin: 0;
  }
}
.tree {
  width: 100%;
  height: calc(100% - 52px);
  color: white;
  overflow: hidden;
  overflow-y: auto;
}
</style>
